<template>
  <view class="uploadComponents">
    <lsj-upload
      ref="lsjUpload"
      childId="upload1"
      :width="width"
      :height="height"
      :option="option"
      :size="size"
      :formats="formats"
      :debug="debug"
      :instantly="instantly"
      @uploadEnd="onuploadEnd"
      @progress="onprogre"
      @change="change"
    >
    </lsj-upload>
    <view class="resumePdf" v-for="(file, index) in filesList">
      <view class="pdfName" @click="previewfile(file)">
        {{ file.originalFilename }}
      </view>
      <view class="delPdf">
        <uni-icons
          @click="delfile(index)"
          class="i"
          color="#CCCCCC"
          type="closeempty"
          size="20"
        ></uni-icons>
      </view>
    </view>
    <view class="tips">
      <!-- 请上传png/jpg,mp4,doc/docx,xls/xlsx,pdf格式附件 -->
    </view>
    <!-- <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content"
        ><video id="myVideo" :src="videoUrl"></video
      ></view>
    </uni-popup> -->
  </view>
</template>

<script>
export default {
  props: {
    alreadyFiles: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      // 上传接口参数
      option: {
        // 上传服务器地址，需要替换为你的接口地址
        url: '', // 该地址非真实路径，需替换为你项目自己的接口地址
        // 上传附件的key
        name: 'file',
        // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
        header: {
          // 示例参数可删除
        },
        // 根据你接口需求自定义body参数
        formData: {
          // 'orderId': 1000
        },
      },
      // 选择文件后是否立即自动上传，true=选择后立即上传
      instantly: true,
      // 必传宽高且宽高应与slot宽高保持一致
      width: '180rpx',
      height: '60rpx',
      // 限制允许上传的格式，空串=不限制，默认为空
      formats: '',
      // 文件上传大小限制
      size: 100,
      // 文件数量限制
      count: 20,
      // 文件回显列表
      files: new Map(),
      // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
      wxFiles: [],
      // 是否打印日志
      debug: true,

      // 演示用
      tabIndex: 0,
      list: [],
      filesList: [],
      videoUrl: '',
      fileType: [
        'image/png',
        'image/jpeg',
        'video/mp4',
        'video/quicktime',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/pdf',
      ], //真机上类型限制
      hname: '',
    }
  },
  created() {
    this.filesList = this.alreadyFiles
    let token = uni.getStorageSync('sgkj_token')
    this.option.header.authorization = token
    this.option.url = this.vuex_config.baseUrl + '/common/upload'
  },
  onReady() {
    setTimeout(() => {
      // console.log('----演示动态更新参数-----');
      // this.$refs['lsjUpload' + this.tabIndex].setData('formData.orderId', '动态设置的参数');
      // console.log('以下注释内容为-动态更新参数更多演示，放开后可查看演示效果');
      // 修改option对象的name属性
      // this.$refs.lsjUpload.setData('name','myFile');
      // 修改option对象的formData内的属性
      // this.$refs.lsjUpload.setData('formData.appid','1111');
      // 替换option对象的formData
      // this.$refs.lsjUpload.setData('formData',{appid:'222'});
      // option对象的formData新增属性
      // this.$refs.lsjUpload.setData('formData.newkey','新插入到formData的属性');
      // ---------演示初始化值，用于已提交后再次编辑时需带入已上传文件-------
      // 方式1=传入数组
      // let files1 = [{name: '1.png'},{name: '2.png',}];
      // 方式2=传入Map对象
      // let files2 = new Map();
      // files2.set('1.png',{name: '1.png'})
      // 此处调用setFiles设置初始files
      // this.$refs.lsjUpload.setFiles(files1);
      // 初始化tab
      // this.onTab(0);
    }, 2000)
  },
  methods: {
    delfile(index) {
      //删除文件
      this.filesList.splice(index, 1)
    },
    previewfile(file) {
      console.log(file)
      // #ifdef H5
      // this.hname = window.location.protocol + '//' + window.location.host //域名
      // #endif
      // #ifdef APP
      // this.hname = uni.$http.baseUrl //域名
      // #endif
      // let fileUrl = this.hname + file.url
      // let arr = file.url.split('.').reverse()
      // if (['png', 'jpg', 'jpeg'].includes(arr[0])) {
      //   uni.previewImage({
      //     urls: [fileUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
      //     current: '', // 当前显示图片的http链接，默认是第一个
      //   })
      // } else if (arr[0] == 'mp4') {
      //   this.videoUrl = fileUrl
      //   this.$refs.popup.open('center')
      // } else if (['pdf', 'xlsx', 'xls', 'doc', 'docx'].includes(arr[0])) {
      // window.open(file.fileName)
      uni.downloadFile({
        url: this.vuex_config.baseUrl + (file.fileUrl || file.fileName),
        success: function (res) {
          var filePath = res.tempFilePath
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功')
            },
          })
        },
      })
      // }
    },
    /**
     * 某文件上传结束回调(成功失败都回调)
     * @param {Object} item 当前上传完成的文件
     */
    onuploadEnd(item) {
      console.log(`${item.name}已上传结束，上传状态=${item.type}`)

      // 更新当前窗口状态变化的文件
      this.files.set(item.name, item)

      // ---可删除--演示上传完成后取服务端数据
      if (item['responseText']) {
        console.log(
          JSON.parse(item.responseText),
          '演示服务器返回的字符串JSON转Object对象'
        )
        let fileData = JSON.parse(item.responseText)
        console.log(fileData, '///////fileData')
        this.filesList.push(fileData)
        this.$emit('input', this.filesList)
        this.files.get(item.name).responseText = JSON.parse(item.responseText)
      }
      uni.hideLoading()
      // 微信小程序Map对象for循环不显示，所以转成普通数组，
      // 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
      // #ifdef MP-WEIXIN
      this.wxFiles = [...this.files.values()]
      // #endif

      // 强制更新视图
      this.$forceUpdate()

      // ---可删除--演示判断是否所有文件均已上传成功
      let isAll = [...this.files.values()].find(
        (item) => item.type !== 'success'
      )
      if (!isAll) {
        console.log('已全部上传完毕')
      } else {
        console.log(isAll.name + '待上传')
      }
    },
    /**
     * 上传进度回调
     * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
     * @param {Object} item 当前正在上传的文件
     */
    onprogre(item) {
      // const lastFile=item
      // if (lastFile.size > 52428800) {
      // 	return uni.showToast({
      // 		title: '文件不能大于50MB',
      // 		icon: 'none'
      // 	})
      // }
      // console.log(lastFile, '文件类型', lastFile.type);
      // if (!this.fileType.includes(lastFile.type)) {
      // 	return uni.showToast({
      // 		title: '请上传指定类型文件',
      // 		icon: 'none'
      // 	})
      // }
      // 更新当前状态变化的文件
      this.files.set(item.name, item)

      console.log('打印对象', JSON.stringify(this.files.get(item.name)))
      // this.filesList.push(item.responseText.data);
      // console.log(this.filesList);
      // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
      // #ifdef MP-WEIXIN
      this.wxFiles = [...this.files.values()]
      // #endif

      // 强制更新视图
      this.$forceUpdate()
    },
    /**
     * 文件选择回调
     * @param {Object} files 已选择的所有文件Map集合
     */
    change(files) {
      uni.showLoading({
        title: '文件上传中',
      })
      console.log('当前选择的文件列表：', JSON.stringify([...files.values()]))
      // 更新选择的文件
      this.files = files
      // 强制更新视图
      this.$forceUpdate()

      // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
      // #ifdef MP-WEIXIN
      this.wxFiles = [...this.files.values()]
      // #endif

      // ---可删除--演示重新定位覆盖层控件
      // this.$nextTick(() => {
      // 	console.log('演示重新定位');
      // 	this.$refs.lsjUpload0.show();
      // 	this.$refs.lsjUpload1.show();
      // 	this.$refs.lsjUpload2.show();
      // });
    },
    // 手动上传
    upload() {
      // name=指定文件名，不指定则上传所有type等于waiting和fail的文件
      this.$refs['lsjUpload' + this.tabIndex].upload()
    },
    /**
     * 指定上传某个文件
     * @param {Object} name 带后缀名的文件名称
     */
    resetUpload(name) {
      this.$refs['lsjUpload' + this.tabIndex].upload(name)
    },
    /**
     * 移除某个文件
     * @param {Object} name 带后缀名的文件名称
     */
    clear(name) {
      // name=指定文件名，不传name默认移除所有文件
      this.$refs['lsjUpload'].clear(name)
    },
    /**
     * ---可删除--演示在组件上方添加新内容DOM变化
     * DOM重排演示，重排后组件内部updated默认会触发show方法,若特殊情况未能触发updated也可以手动调用一次show()
     * 什么是DOM重排？自行百度去
     */
    add() {
      this.list.push('DOM重排测试')
    },
    /**
     * ---可删除--演示Tab切换时覆盖层是否能被点击
     * APP端因为是webview，层级比view高，此时若不希望点击触发选择文件，需要手动调用hide()
     * 手动调用hide后，需要调用show()才能恢复覆盖层的点击
     */
    onTab(tabIndex) {
      this.$refs.lsjUpload0.hide()
      this.$refs.lsjUpload1.hide()

      this.tabIndex = tabIndex

      this.$nextTick(() => {
        this.$refs['lsjUpload' + this.tabIndex].show()
      })
    },
    /**
     * 打开nvue窗口查看非跟随窗口滚动效果
     */
    open() {
      uni.navigateTo({
        url: '/pages/nvue-demo/nvue-demo',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.uploadComponents {
  .uploadBtn {
    width: 200rpx;
    height: 50rpx;
    background-color: skyblue;
    text-align: center;
    line-height: 50rpx;
  }

  .resumePdf {
    width: 100%;
    height: 80rpx;
    // background-color: skyblue;
    border: 2rpx solid #cccccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20rpx;
    margin-bottom: 10rpx;

    .pdfName {
      font-size: 24rpx;
      // flex:1;
      width: 300rpx;
      height: 100%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .delPdf {
      width: 60rpx;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .tips {
    font-size: 20rpx;
    word-break: break-all;
    color: #f74451;
  }
}
</style>